<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>社区图书馆多功能厅预约系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/style/home.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <ul class="layui-nav layui-bg-cyan">
      <li class="layui-nav-item"><a href="/distribution">基本介绍</a></li>
      <li class="layui-nav-item"><a href="/introduction">馆藏分布</a></li>
      <li class="layui-nav-item"><a href="/dynamic">最新动态</a></li>
      <li class="layui-nav-item layui-this"><a href="#">馆多功能厅</a></li>
    </ul>
    <br>
    <ul th:replace="/common/head::head-right"></ul>
  </div>
  <div class="layui-body home-body">
    <div class="layui-container home-container">
      <h2 style="text-align: center;padding: 15px">多功能厅信息介绍</h2>
      <div class="layui-row layui-col-space15" style="padding-bottom: 100px">
        <div th:each="room : ${roomList}" class="layui-col-md6">
          <div class="layui-panel home-panel">
            <div class="home-panel-image">
              <img width="200" height="200" th:src="'/api/oss/download?file='+${room.imagePath}" alt="多功能厅图片">
            </div>
            <span class="home-panel-context">
              <div>房间号: <span th:text="${room.roomNumber}"></span></div>
              <div>面积: <span th:text="${room.area}"></span>㎡</div>
              <div>所需积分: <span th:text="${room.needScore}"></span></div>
              <div>所在楼层: <span th:text="${room.floor}"></span>楼</div>
              <div>详情: <span th:text="${room.detail}"></span></div>
              <div><a th:href="'/detail?id='+${room.id}" class="layui-btn layui-btn-xs">查看详情</a></div>
            </span>
          </div>
        </div>
      </div>
      <div id="page" class="page-footer"></div>
    </div>
  </div>
  <div class="layui-footer home-footer">
    <!-- 底部固定区域 -->
    © 2021 layui.com
  </div>
</div>
<script src="/layui/layui.js"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script>
  layui.use('laypage', function () {
    const laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
      count: [[${count}]], //数据总数，从服务端得到
      jump: function (obj, first) {
        // 首次不执行
        if (!first) {
          window.location.href = "/room/page?current=" + obj.curr + "&limit=" + obj.limit;
        }
      }
    });
  });
</script>
</body>
</html>